<template>
  <div class="app-container">
  <el-table
    :data="headData"
    border
    style="width: 100%">
    <el-table-column
      prop="orderId"
      label="订单ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="120">
      
    </el-table-column>

    
    <el-table-column
      label="订单项"
      width="2000">


      <template slot-scope="scope"> 
      <el-table
    :data='scope.row.main'
    border
    style="width: 100%">
    <el-table-column
      prop="item_id"
      label="订单项ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="pid"
      label="商品ID"
      width="120">
    </el-table-column>

    <el-table-column
      prop="pname"
      label="商品名称"
      width="180">
    </el-table-column>

    <el-table-column
      prop="pimg"
      label="商品图片"
      width="180">
      <template slot-scope="scope">
      <el-image 
          style="width: 100px; height: 100px"
          :src='scope.row.pimg'>
        </el-image>
     </template>
    </el-table-column>

    <el-table-column
      prop="skuid"
      label="skuID"
      width="120">
    </el-table-column>

    <el-table-column
      prop="skuname"
      label="skuName"
      width="180">
    </el-table-column>

    <el-table-column
      prop="pprice"
      label="商品价格"
      width="120">
    </el-table-column>

    <el-table-column
      prop="counts"
      label="购买数量"
      width="120">
    </el-table-column>

    <el-table-column
      prop="toatal"
      label="总价格"
      width="120">
    </el-table-column>

    <el-table-column
      prop="pid"
      label="商品ID"
      width="180">
    </el-table-column>

    <el-table-column
      prop="pid"
      label="商品ID"
      width="180">
    </el-table-column>
  
  </el-table>
</template>
    </el-table-column>
  </el-table>


      <!-- 分页 -->
  <el-row style="margin-top:20px" >
    <el-pagination
      style="float: right"
      background
      :current-page="current"
      layout="prev, pager, next"
      @current-change="goto"
      :total="total"
      :page-size="10"
      >
    </el-pagination>
  </el-row>

  </div>
</template>

<script>
import http from '@/utils/request'
export default {
  data(){
    return{
        current:0,
        total:0,
        headData:[],
        mainData:[],
        item_id:"123",
        orderId:''
    }
  },
  mounted(){
    this.goto()
    console.log(this.orderId);
  },methods:{
    goto(current = 1){
      http.get('/AboutOrderController',{
        params: {
          current: current
        }
      }).then(res =>{
        let datas = res.data.data
          this.headData = datas.data
          this.current = datas.current
          this.total = datas.total

          console.log(datas.data);
      })
    }
  }

}
</script>

<style>

</style>